<!-- src/components/Sidebar.vue -->
<template>
    <el-menu
            mode="vertical"
            router
            background-color="#f5f7fa"
            text-color="#303133"
            active-text-color="#409EFF"
            @open="handleOpen"
            @close="handleClose"
    >
        <el-submenu v-for="item in menuItems" :key="item.name" :index="item.name">
            <template #title>
                <i class="el-icon-menu"></i>
                <span>{{ item.name }}</span>
            </template>
            <el-menu-item v-for="child in item.children" :key="child.path" :index="child.path">
                {{ child.name }}
            </el-menu-item>
        </el-submenu>
    </el-menu>
</template>

<script>
import { menuItems } from '@/data/menuItems';

export default {
    data() {
        return {
            menuItems,
        };
    },

    methods: {
        handleOpen(key, keyPath) {
            console.log('当前展开的菜单:', key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log('当前关闭的菜单:', key, keyPath);
        },
    },
};
</script>
